<html>
	<head>
		<meta charset="utf-8" />
		<title>效果</title>
	</head>
	<style type="text/css">
        input{height: 30px;width: 80px;border: 1px #000 solid;}
        div{height: 40px;width: 100px;border: 1px #000 solid; margin: 5px;overflow: hidden;}
    </style>
	<script src="js/jquery-2.2.3.min.js"></script>
	<body>
		<input type="button" id="btn1" value="1">
		<input type="button" id="btn2" value="2">
		<input type="button" id="btn3" value="3">
		<input type="button" id="btn4" value="4">
		<input type="button" id="btn5" value="5">
		<input type="button" id="btn6" value="6">
		<input type="button" id="btn7" value="7">
		<input type="button" id="btn8" value="8">
		<input type="button" id="btn9" value="9">
		<div id="fff" style="display:none"></div>
	</body>
	<script type="text/javascript">
	/*基本*/
	    //$("p").show("slow");
	    $("#btn1").click(function(){
	    	$("#fff").show("fast",function(){
            $(this).text("Animation Done!");//添加文本
         });
	    })

	    $("#btn2").click(function(){
	    	$("#fff").hide("fast",function(){
            alert("Animation Done!");//弹出提示框
         });
	    })
	/*滑动*/  
	    $("#btn3").click(function(){
	    	$("#fff").slideDown();
	    });

        $("#btn4").click(function(){
	    	$("#fff").slideUp();
	    });

	    $("#btn5").click(function(){
	    	$("#fff").slideToggle();//向上或向下滑动
	    });

	 /*淡入淡出*/
	    $("#btn6").click(function  () {
	    	$("#fff").fadeIn();
	    });
	    $("#btn7").click(function  () {
	    	$("#fff").fadeOut();
	    });
	    $("#btn8").click(function  () {
	    	$("#fff").fadeTo("slow",0.25);//加透明度
	    });
	     $("#btn9").click(function  () {
	    	$("#fff").fadeToggle("slow","linear");//跟fadeIn一样淡入
	    });
	</script>
</html>